<template lang="html">
  <div class="index-container">
    <!-- 未登陆 -->
    <template v-if="!getLogin">
      <swiper class="swiper" :options="swiperOption">
        <swiper-slide>
          <img src="http://www.wwtliu.com/sxtstu/blueberrypai/indexImg/banner1.jpg" alt="">
        </swiper-slide>
        <swiper-slide>
          <img src="http://www.wwtliu.com/sxtstu/blueberrypai/indexImg/banner2.jpg" alt="">
        </swiper-slide>
        <swiper-slide>
          <img src="http://www.wwtliu.com/sxtstu/blueberrypai/indexImg/banner3.jpg" alt="">
        </swiper-slide>
        <div class="swiper-pagination"  slot="pagination"></div>
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
      </swiper>
    </template>
    <!-- 登陆之后 -->
    <template v-if="getLogin">
        登陆之后
    </template>
  </div>
</template>

<script>


export default {
  name:"index",
  data(){
    return{
      swiperOption: {
        autoplay:true,
        pagination: {
          el: '.swiper-pagination',
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        }
      }
    }
  },
  created(){

  },
  computed:{
    getLogin(){
      return this.$store.getters.getIsLoginAll;
    }
  }
}
</script>

<style lang="less" scoped>

@g_width:1200px;

.index-container{
  width: @g_width;
  margin: 10px auto;
  .swiper{
    width: 100%;
    height: 400px;
  }
}

</style>
